<template>
    <div class="recharge-record-container">
        <div class="header-card">
            <h2>充值记录</h2>
            <p>管理用户充值记录</p>
        </div>

        <el-card class="table-card" shadow="never">
            <div class="toolbar">
                <div class="search-area">
                    <el-select v-model="filterUserId" placeholder="请选择用户" clearable
                        style="width: 150px; margin-right: 10px;" @change="fetchData">
                        <el-option label="全部用户" :value="null"></el-option>
                        <el-option v-for="user in userOptions" :key="user.id" :label="user.username" :value="user.id" />
                    </el-select>

                    <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                        format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 240px; margin-right: 10px;"
                        @change="fetchData" />

                    <el-input v-model="searchKeyword" placeholder="搜索用户账号" style="width: 200px;" clearable
                        @keyup.enter="fetchData">
                        <template #append>
                            <el-button icon="el-icon-search" @click="fetchData"></el-button>
                        </template>
                    </el-input>
                </div>
            </div>

            <el-table :data="tableData" style="width: 100%" border stripe v-loading="loading">
                <el-table-column prop="id" label="ID" width="80" align="center" />
                <el-table-column prop="order_no" label="订单号" min-width="180" />
                <el-table-column prop="username" label="用户名" min-width="120" />
                <el-table-column prop="account" label="用户账号" min-width="150" />
                <el-table-column prop="recharge_amount" label="充值金额" width="120" align="center">
                    <template #default="scope">¥{{ scope.row.recharge_amount }}</template>
                </el-table-column>
                <el-table-column prop="balance_before" label="充值前余额" width="120" align="center">
                    <template #default="scope">¥{{ scope.row.balance_before }}</template>
                </el-table-column>
                <el-table-column prop="balance_after" label="充值后余额" width="120" align="center">
                    <template #default="scope">¥{{ scope.row.balance_after }}</template>
                </el-table-column>
                <el-table-column prop="recharge_time" label="充值时间" width="170" align="center">
                    <template #default="scope">{{ formatDate(scope.row.recharge_time) }}</template>
                </el-table-column>
                <el-table-column prop="payment_method" label="支付方式" width="120" align="center">
                    <template #default="scope">{{ getPaymentMethodText(scope.row.payment_method) }}</template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100" align="center">
                    <template #default="scope">
                        <el-tag :type="getStatusType(scope.row.status)">
                            {{ getStatusText(scope.row.status) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right" align="center">
                    <template #default="scope">
                        <el-button size="small" type="primary" @click="viewDetail(scope.row)" plain round>详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination-container">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </el-card>

        <el-dialog v-model="dialogVisible" title="充值记录详情" width="600px" :before-close="handleDialogClose">
            <el-form :model="detailData" label-width="120px" label-position="left" disabled>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="订单号:">
                            <span class="form-value">{{ detailData.order_no }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户名:">
                            <span class="form-value">{{ detailData.username }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="用户账号:">
                            <span class="form-value">{{ detailData.account }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="充值金额:">
                            <span class="form-value form-amount">¥{{ detailData.recharge_amount }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="充值前余额:">
                            <span class="form-value">¥{{ detailData.balance_before }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="充值后余额:">
                            <span class="form-value">¥{{ detailData.balance_after }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="充值时间:">
                            <span class="form-value">{{ formatDate(detailData.recharge_time) }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="支付方式:">
                            <span class="form-value">{{ getPaymentMethodText(detailData.payment_method) }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="状态:">
                    <el-tag :type="getStatusType(detailData.status)">
                        {{ getStatusText(detailData.status) }}
                    </el-tag>
                </el-form-item>

                <el-form-item label="备注:">
                    <span class="form-value">{{ detailData.remark || '无' }}</span>
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleDialogClose" round>关闭</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const loading = ref(false)
const dialogVisible = ref(false)
const searchKeyword = ref('')
const filterUserId = ref(null)
const dateRange = ref([])

// 用户选项（模拟数据）
const userOptions = ref([
    { id: 1, username: '张三', account: 'zhangsan' },
    { id: 2, username: '李四', account: 'lisi' },
    { id: 3, username: '王五', account: 'wangwu' }
])

const detailData = ref({})

const fetchData = () => {
    loading.value = true
    // 模拟API请求
    setTimeout(() => {
        const mockData = [
            {
                id: 1,
                order_no: 'RC202305201030001',
                user_id: 1,
                username: '张三',
                account: 'zhangsan',
                recharge_amount: 100.00,
                balance_before: 50.00,
                balance_after: 150.00,
                recharge_time: '2023-05-20 10:30:00',
                payment_method: '1',
                status: '1',
                remark: '微信支付'
            },
            {
                id: 2,
                order_no: 'RC202305211420002',
                user_id: 2,
                username: '李四',
                account: 'lisi',
                recharge_amount: 200.00,
                balance_before: 100.00,
                balance_after: 300.00,
                recharge_time: '2023-05-21 14:20:00',
                payment_method: '2',
                status: '1',
                remark: '支付宝支付'
            },
            {
                id: 3,
                order_no: 'RC202305220915003',
                user_id: 3,
                username: '王五',
                account: 'wangwu',
                recharge_amount: 50.00,
                balance_before: 200.00,
                balance_after: 250.00,
                recharge_time: '2023-05-22 09:15:00',
                payment_method: '3',
                status: '1',
                remark: '银行卡支付'
            },
            {
                id: 4,
                order_no: 'RC202305221130004',
                user_id: 1,
                username: '张三',
                account: 'zhangsan',
                recharge_amount: 300.00,
                balance_before: 150.00,
                balance_after: 450.00,
                recharge_time: '2023-05-22 11:30:00',
                payment_method: '1',
                status: '0',
                remark: '支付失败'
            }
        ]
        tableData.value = mockData
        total.value = mockData.length
        loading.value = false
    }, 500)
}

const formatDate = (date) => {
    if (!date) return ''
    return date.replace('T', ' ').substring(0, 19)
}

const getPaymentMethodText = (method) => {
    const methodMap = {
        '1': '微信支付',
        '2': '支付宝',
        '3': '银行卡',
        '4': '余额支付'
    }
    return methodMap[method] || '未知方式'
}

const getStatusText = (status) => {
    const statusMap = {
        '0': '失败',
        '1': '成功'
    }
    return statusMap[status] || '未知状态'
}

const getStatusType = (status) => {
    const typeMap = {
        '0': 'danger',
        '1': 'success'
    }
    return typeMap[status] || 'info'
}

const viewDetail = (row) => {
    detailData.value = { ...row }
    dialogVisible.value = true
}

const handleDialogClose = (done) => {
    dialogVisible.value = false
    done()
}

const handleSizeChange = (val) => {
    pageSize.value = val
    fetchData()
}

const handleCurrentChange = (val) => {
    currentPage.value = val
    fetchData()
}

onMounted(() => {
    fetchData()
})
</script>

<style scoped>
.recharge-record-container {
    min-height: calc(100vh - 80px);
}

.header-card {
    background: #409eff;
    color: white;
    padding: 20px 30px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-card h2 {
    margin: 0 0 10px 0;
    font-size: 24px;
    font-weight: 500;
}

.header-card p {
    margin: 0;
    opacity: 0.9;
    font-size: 14px;
}

.table-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.toolbar {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding: 15px 0;
}

.form-value {
    color: #606266;
}

.form-amount {
    font-weight: bold;
    color: #67c23a;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
}
</style>